<template>
  <div class="dashboard">
    <!-- <div class="dashboard-text">name: {{ name }}</div> -->
    <div class="box">
      <div class="Box-left">
        <div class="head-left">
          <img src="./1212.png" alt="" class="head-left-top">
          <img src="./1213.png" alt="" class="head-right-bottom">
          <div class="head-left-text">
            <span class="text">工单统计</span><span class="text-time">2023.08.01~2023.08.12</span>
            <div class="head-left-num">
              <div class="head-left-number">
                <p>0</p>
                <span>工单总数(个)</span>
              </div>
              <div class="head-left-number">
                <p>0</p>
                <span>完成工单(个)</span>
              </div>
              <div class="head-left-number">
                <p>0</p>
                <span>进行工单(个)</span>
              </div>
              <div class="head-left-number">
                <p>0</p>
                <span>取消工单(个)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="head-right">
          <img src="./1214.png" alt="" class="head-right-bottom2">
          <span class="text">销售统计</span><span class="text-time">2023.08.01~2023.08.12</span>
          <div class="head-right-num">
            <div class="head-right-number">
              <p>5416</p>
              <span>订单量(个)</span>
            </div>
            <div class="head-right-number">
              <p>54.01</p>
              <span>销售额(元)</span>
            </div>
          </div>
        </div>
        <div class="head-bottom">
          <div class="head-bottom-left">
            <span class="text">销售数据</span><span class="text-time">2023.08.07~2023.08.12</span>
          </div>
          <div class="head-bottom-right">
            <el-radio-group v-model="radio2" size="mini">
              <el-radio-button label="周"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
          <div id="main" style="width: 50%;height:240px;"></div>
          <div id="main2" style="width: 50%;height:300px;"></div>
        </div>
      </div>
      <div class="Box-right">
        <span class="text">商品热榜</span><span class="text-time">2023.08.01~2023.08.12</span>
        <div class="Box-right-text" v-for="item in 10" :key="item">
          <div class="Box-right-text-left">
            <img src="./1215.png" alt="">青梅绿茶
          </div>
          <div class="Box-right-text-right">
            628单
          </div>
        </div>
      </div>
    </div>
    <div class="Box-footer">
      <div class="Box-footer-left">
        <span>合作商点位数Top5</span>
        <router-link to="/node/partner">
          <i class="el-icon-more"></i>
        </router-link>
        <div class="echarts_content">
          <div id="main3"></div>
          <div class="echarts_content_num">
            <h2>16</h2>
            <p>点位数</p>
            <h2>5</h2>
            <p>合作商数</p>
          </div>
        </div>
      </div>
      <div class="Box-footer-right">
        <span>异常设备监控</span>
        <i class="el-icon-more"></i>
        <div class="nofound">
          <img src="./1216.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import * as echarts from 'echarts';

export default {
  name: 'home',
  data() {
    return {
      radio2: '周',
      list: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    }
  },
  computed: {
    // ...mapGetters([
    //   'name'
    // ])
  },
  mounted() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '单位：元'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.list
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [0, 0, 0, 0, 0, 0]
        }
      ]
    };

    option && myChart.setOption(option);


    var chartDom2 = document.getElementById('main2');
    var myChart2 = echarts.init(chartDom2);
    var option2;

    option2 = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200],
          type: 'bar'
        }
      ]
    };

    option2 && myChart2.setOption(option2);

    var chartDom3 = document.getElementById('main3');
    var myChart3 = echarts.init(chartDom3);
    var option3;

    option3 = {
      title: {
        text: '南丁格尔玫瑰图',
        x: 'center'
      },
      color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel']
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      series: [
        {
          name: '增值电信业务统计表',
          type: 'pie',
          radius: [40, 150],

          roseType: 'area',
          data: [
            { value: 10, name: 'rose1' },
            { value: 5, name: 'rose2' },
            { value: 15, name: 'rose3' },
            { value: 25, name: 'rose4' },
            { value: 20, name: 'rose5' },
            { value: 35, name: 'rose6' },
            { value: 30, name: 'rose7' },
            { value: 40, name: 'rose8' }
          ]
        }
      ]
    };

    option3 && myChart3.setOption(option3);
  }
}

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.dashboard {
  // background-color: #f8fafd;

  .box {
    display: flex;

    .Box-left {
      width: 62vw;
      display: flex;
      flex-wrap: wrap;
      margin-right: 2vw;

      .head-left {
        position: relative;
        width: 55%;
        background-color: #e9f3ff;
        height: 180px;
        border-radius: 20px;
        margin-right: 2%;
        padding: 25px;

        .head-left-top {
          position: absolute;
          top: 0;
          left: 0;
          border-top-left-radius: 20px;
          z-index: 0;
        }

        .head-right-bottom {
          position: absolute;
          bottom: 0;
          right: 0;
        }

        .text {
          font-size: 16px;
          font-weight: 700;
          margin-right: 10px;
        }

        .text-time {
          font-size: 12px;
          color: gray;
        }

        .head-left-num {
          display: flex;

          .head-left-number {
            width: 150px;
            margin-top: 30px;

            p {
              font-size: 40px;
              font-weight: 700;
              color: #072074;
              text-shadow: 3px 5px 5px #c2d5ff;
            }

            span {
              font-size: 14px;
              color: #759fee;
            }
          }
        }
      }

      .head-right {
        position: relative;
        width: 43%;
        background-color: #fbefe8;
        border-radius: 20px;
        padding: 25px;
        height: 180px;

        .head-right-bottom2 {
          position: absolute;
          bottom: 0;
          right: 25px;
          z-index: 0;
        }

        .text {
          font-size: 16px;
          font-weight: 700;
          margin-right: 10px;
        }

        .text-time {
          font-size: 12px;
          color: gray;
        }

        .head-right-num {
          display: flex;
          width: 300px;
          margin: 0 auto;

          .head-right-number {
            z-index: 1;
            width: 150px;
            margin-top: 30px;
            text-align: center;

            p {
              font-size: 40px;
              font-weight: 700;
              color: #ff5757;
              text-shadow: 3px 3px 6px #f39191;
            }

            span {
              font-size: 14px;
              color: #f39191;
            }
          }
        }
      }

      .head-bottom {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100vw;
        height: 350px;
        background-color: #fff;
        border-radius: 10px;
        padding: 15px;

        .head-bottom-left {
          width: 50%;

          .text {
            font-size: 16px;
            font-weight: 700;
            margin-right: 10px;
          }

          .text-time {
            font-size: 12px;
            color: gray;
          }
        }

        .head-bottom-right {
          width: 50%;
          position: relative;

          .el-radio-group {
            position: absolute;
            right: 0;
          }
        }
      }
    }

    .Box-right {
      width: 36vw;
      padding: 20px;
      background-color: white;

      .text {
        font-size: 16px;
        font-weight: 700;
        margin-right: 10px;
      }

      .text-time {
        font-size: 12px;
        color: gray;
      }

      .Box-right-text {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-top: 25px;

        .Box-right-text-left {}

        .Box-right-text-right {
          color: gray;
        }
      }
    }
  }
}

.Box-footer {
  display: flex;

  .Box-footer-left {
    width: 55%;
    position: relative;
    margin-right: 2%;
    background-color: white;
    height: 300px;
    margin-top: 20px;
    padding: 15px;

    span {
      font-weight: 700;
    }

    .el-icon-more {
      position: absolute;
      right: 20px;
      border: 2px solid #85a7ff;
      border-radius: 50%;
      color: #85a7ff;
    }

    .echarts_content {
      display: flex;

      #main3 {
        width: 65%;
        height: 280px;
      }

      .echarts_content_num {
        margin-left: 50px;
        background-color: #f8f8f9;
        color: #072074;
        width: 150px;
        height: 240px;
        padding: 40px 0 0 30px;

        p {
          margin: 15px 0;
        }
      }
    }

  }


  .Box-footer-right {
    width: 43%;
    position: relative;
    background-color: white;
    height: 300px;
    margin-top: 20px;
    padding: 15px;

    span {
      font-weight: 700;
    }

    .el-icon-more {
      position: absolute;
      right: 20px;
      border: 2px solid #85a7ff;
      border-radius: 50%;
      color: #85a7ff;
    }

    .nofound {
      width: 100%;
      text-align: center;
      margin-top: 50px;
    }
  }
}
</style>
